<template>
  <span v-if="content.length >= size && isName" style="display:block">
    <el-tooltip
      class="item"
      effect="dark"
      :content="content"
      placement="right"
    >
      <el-button
        type="text"
        @click="$emit('click')"
        :disabled="!hasPermission || disabled"
        class="link-text-button"
      >
        <i v-if="iconClassName" :class="iconClassName" style="margin-right: 5px;"></i>
        <span :style="{
          fontSize: fontSize
        }">{{ content }}</span>
      </el-button>
    </el-tooltip>
  </span>
  <span v-else-if="content.length < size && isName" style="display:block">
    <el-button
      type="text"
      @click="$emit('click')"
      :disabled="!hasPermission || disabled"
      class="link-text-button"
    >
      <i v-if="iconClassName" :class="iconClassName" style="margin-right: 5px;"></i>
      <span :style="{
        fontSize: fontSize
      }">{{ content }}</span>
    </el-button>
  </span>
   <span v-else-if="!isName">
    <el-button
      type="text"
      @click="$emit('click')"
      :disabled="!hasPermission || disabled"
      class="link-text-button-action"
    >
      <i v-if="iconClassName" :class="iconClassName" style="margin-right: 5px;"></i>
      <span :style="{
        fontSize: fontSize
      }">{{ content }}</span>
    </el-button>
  </span>
</template>
<script lang="ts">
import Vue from 'vue'
import { AuthModule } from "../../../store/modules/auth";

export default Vue.extend({
  props: {
    content: {
      type: String,
      default: ""
    },
    iconClassName: {
      type: String,
      default: ""
    },
    size: {
      type: Number,
      default: 5
    },
    fontSize: {
      type: String,
      default: "16px"
    },
    roles: {
      type: Array,
      default: () => []
    },
    permissions: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isName: {
      type: Boolean,
      default:false
    }
  },
  computed: {
    hasPermission() {
      const roles = AuthModule.roles;

      if ((this as any).roles && (this as any).roles.length > 0) {
        return (this as any).roles.some((r: any) => roles.includes(r.name));
      } else {
        return true;
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.link-text-button {
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
}
.link-text-button-action {
  overflow: auto;
}
</style>
